<template>
  <n-config-provider :theme="getTheme" :locale="zhCN" :date-locale="dateZhCN" :theme-overrides="getThemeOverrides">
    <app-provider>
      <router-view v-slot="{ Component }">
        <transition name="animation-shocking-from-the-right">
          <keep-alive :include="asyncRouteStore.getKeepAliveComponentList">
            <suspense>
              <component :is="Component" />
              <template #fallback><global-loading /></template>
            </suspense>
          </keep-alive>
        </transition>
      </router-view>
    </app-provider>
  </n-config-provider>
</template>
<script setup lang="ts">
  import { zhCN, dateZhCN, darkTheme } from 'naive-ui';
  import type { GlobalThemeOverrides } from 'naive-ui';
  import { AppProvider } from '@/components/application';
  import { useDesignSettingStoreOut } from '@/stores/modules/designSetting';
  import { lighten } from '@/utils';
  import useTitleMessage from '@/hooks/useTitleMessage';
  import { useAsyncRouteStoreOut } from '@/stores/modules/asyncRoute';

  useTitleMessage();
  const designStore = useDesignSettingStoreOut();
  const asyncRouteStore = useAsyncRouteStoreOut();
  const getTheme = computed(() => (designStore.darkTheme ? darkTheme : undefined));
  const componentConfig = computed(() => designStore.getComponentConfig).value;

  const getThemeOverrides = computed(() => {
    const appTheme = designStore.appTheme;
    const lightenStr = lighten(appTheme, 6);
    const themeOverrides: GlobalThemeOverrides = {
      common: {
        primaryColor: appTheme,
        primaryColorHover: lightenStr,
        primaryColorPressed: lightenStr,
        primaryColorSuppl: appTheme,
      },
      LoadingBar: {
        colorLoading: appTheme,
      },
      Scrollbar: {
        color: componentConfig!.scrollbarColor,
        colorHover: componentConfig!.scrollbarColorHover,
      },
    };
    return themeOverrides;
  });
</script>
<style lang="scss">
  @import url('styles/index.scss');
</style>
